<template>
  <div>
    <!-- <p>num: {{ num }}</p>
    <button @click="setNum">setNum</button> -->
    <input type="text" v-model="kw" /><span>{{ kw }}</span>
    <button @click="setSName">修改vuex数据</button>
  </div>
</template>

<script>
import { numberRef, useDebouncedRef } from "@/modules/refs";
import { onUpdated, ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "Vue3CourseCustomRefView",
  setup() {
    // const num = numberRef(10);
    // const setNum = () => {
    //   num.value = 100;
    // };

    // const kw = ref("");
    const kw = useDebouncedRef("", 1000);
    onUpdated(() => {
      console.log("组件更新完毕");
    });

    const store = useStore();

    const setSName = () => {
      store.commit("setSName", "小红");
    };

    return {
      // num,
      // setNum,
      kw,
      setSName,
    };
  },
};
</script>
